<template>
    <div>
        <el-button type="success" size="medium" id="printBtn" v-print="printObj"><i class="el-icon-printer"></i>打印</el-button>

        <form class="wrapper" id="wrapperApplyPurchaseTable">
            <div class="header">
                <img src="/image/logo.jpg" /><label>固基行远，协晨悟通</label>
            </div>
            <h2 class="Title">固远晨通科技发展有限公司项目人员考勤表</h2>
            <table class="report_data" id="LAY-EXPORT-TEST" rules=all>
                <tr class="tr_one">
                    <td class="td_Title">项目名称</td>
                    <td class="td_Content">{{ project.ProjectName }}</td>
                    <td class="td_Title">项目编号</td>
                    <td class="td_Content">{{ project.ProjectNumber }}</td>
                    <td class="td_Title">年月选择</td>
                    <td class="td_Content" style="width:220px;padding:10px;">
                        <el-date-picker
                                @change="datepickerchangeevent"
                                v-model="yearDate"
                                type="month" 
                                placeholder="选择月">
                        </el-date-picker>
                    </td>
                </tr>
                <tr class="tr_one"><td class="td_Title" colspan="6">考勤情况</td></tr>
            </table>
            <table class="report_data" rules=all>
                <tr>
                    <td class="td_Title">姓名</td>
                    <td class="td_Title">日期</td>
                    <td class="td_Title">1</td>
                    <td class="td_Title">2</td>
                    <td class="td_Title">3</td>
                    <td class="td_Title">4</td>
                    <td class="td_Title">5</td>
                    <td class="td_Title">6</td>
                    <td class="td_Title">7</td>
                    <td class="td_Title">8</td>
                    <td class="td_Title">9</td>
                    <td class="td_Title">10</td>
                    <td class="td_Title">11</td>
                    <td class="td_Title">12</td>
                    <td class="td_Title">13</td>
                    <td class="td_Title">14</td>
                    <td class="td_Title">15</td>
                    <td class="td_Title">16</td>
                    <td class="td_Title">17</td>
                    <td class="td_Title">18</td>
                    <td class="td_Title">19</td>
                    <td class="td_Title">20</td>
                    <td class="td_Title">21</td>
                    <td class="td_Title">22</td>
                    <td class="td_Title">23</td>
                    <td class="td_Title">24</td>
                    <td class="td_Title">25</td>
                    <td class="td_Title">26</td>
                    <td class="td_Title">27</td>
                    <td class="td_Title">28</td>
                    <td class="td_Title">29</td>
                    <td class="td_Title">30</td>
                    <td class="td_Title">31</td>
                    <td class="td_Title">小计</td>
                    <td class="td_Title">合计</td>
                </tr>
                <tr>
                    <td class=" " rowspan="2">合计</td>
                    <td class=" ">上午</td>
                    <td class="PeopleCount AM1">0</td>
                    <td class="PeopleCount AM2">0</td>
                    <td class="PeopleCount AM3">0</td>
                    <td class="PeopleCount AM4">0</td>
                    <td class="PeopleCount AM5">0</td>
                    <td class="PeopleCount AM6">0</td>
                    <td class="PeopleCount AM7">0</td>
                    <td class="PeopleCount AM8">0</td>
                    <td class="PeopleCount AM9">0</td>
                    <td class="PeopleCount AM10">0</td>
                    <td class="PeopleCount AM11">0</td>
                    <td class="PeopleCount AM12">0</td>
                    <td class="PeopleCount AM13">0</td>
                    <td class="PeopleCount AM14">0</td>
                    <td class="PeopleCount AM15">0</td>
                    <td class="PeopleCount AM16">0</td>
                    <td class="PeopleCount AM17">0</td>
                    <td class="PeopleCount AM18">0</td>
                    <td class="PeopleCount AM19">0</td>
                    <td class="PeopleCount AM20">0</td>
                    <td class="PeopleCount AM21">0</td>
                    <td class="PeopleCount AM22">0</td>
                    <td class="PeopleCount AM23">0</td>
                    <td class="PeopleCount AM24">0</td>
                    <td class="PeopleCount AM25">0</td>
                    <td class="PeopleCount AM26">0</td>
                    <td class="PeopleCount AM27">0</td>
                    <td class="PeopleCount AM28">0</td>
                    <td class="PeopleCount AM29">0</td>
                    <td class="PeopleCount AM30">0</td>
                    <td class="PeopleCount AM31">0</td>
                    <td class=" " rowspan="2"></td>
                    <td class="AllTotal" rowspan="2"></td>
                </tr>
                <tr>
                    <td class=" ">下午</td>
                    <td class="PeopleCount PM1">0</td>
                    <td class="PeopleCount PM2">0</td>
                    <td class="PeopleCount PM3">0</td>
                    <td class="PeopleCount PM4">0</td>
                    <td class="PeopleCount PM5">0</td>
                    <td class="PeopleCount PM6">0</td>
                    <td class="PeopleCount PM7">0</td>
                    <td class="PeopleCount PM8">0</td>
                    <td class="PeopleCount PM9">0</td>
                    <td class="PeopleCount PM10">0</td>
                    <td class="PeopleCount PM11">0</td>
                    <td class="PeopleCount PM12">0</td>
                    <td class="PeopleCount PM13">0</td>
                    <td class="PeopleCount PM14">0</td>
                    <td class="PeopleCount PM15">0</td>
                    <td class="PeopleCount PM16">0</td>
                    <td class="PeopleCount PM17">0</td>
                    <td class="PeopleCount PM18">0</td>
                    <td class="PeopleCount PM19">0</td>
                    <td class="PeopleCount PM20">0</td>
                    <td class="PeopleCount PM21">0</td>
                    <td class="PeopleCount PM22">0</td>
                    <td class="PeopleCount PM23">0</td>
                    <td class="PeopleCount PM24">0</td>
                    <td class="PeopleCount PM25">0</td>
                    <td class="PeopleCount PM26">0</td>
                    <td class="PeopleCount PM27">0</td>
                    <td class="PeopleCount PM28">0</td>
                    <td class="PeopleCount PM29">0</td>
                    <td class="PeopleCount PM30">0</td>
                    <td class="PeopleCount PM31">0</td>
                </tr>
                <tbody id="AddHtml"></tbody>
            </table>
            <div class="author"><span>固远晨通科技发展有限公司制</span></div>
            <div id="Footer">
                <div><span style="margin-right: 100px;">固远晨通科技发展有限公司</span><span>网址：<a>www.guyuanct.com</a></span></div>
                <div><span>地址：成都西区大道199号成都模具工业园C1栋</span></div>
            </div>
        </form>
    </div>
</template>

<script>
    import * as publicjs from "../../../../public/Scriput/Public";
    import $ from 'jquery'

    export default {
        name: "ProjectpersonnelTable",
        props:{
            project:{
                type:Object,
                required:true,
            },
        },
        watch:{
            project:function () {
                this.Init()
                this.GetData()
            }
        },
        mounted() {
            let _this = this
            this.$nextTick(()=>{
                _this.Init()
                _this.GetData()
            })
        },
        data(){
            return{
                printObj: {
                    id: "wrapperApplyPurchaseTable",  //打印标签的id
                    popTitle: '',  //文件标题
                },
                yearDate: new Date(),
                dataProject:{},
                dataProjectCheckWorks:{},
                AllProjectPeople:[],
                AllTotal:0,
            }
        },
        methods:{
            //额外数据
            Init(){
                this.AllProjectPeople = publicjs.GetProjectPeople(this.$http,this.project.Id)
            },
            //初始数据加载
            GetData(){
                let year = this.yearDate.getFullYear()
                let month = this.yearDate.getMonth()
                this.$http.post('Project1/GetProjectCheckWorkReport',{
                    ProjectId:this.project.Id,
                    year: year,
                    month: month,
                }).then(res=>{
                    this.dataProject = res.data.dataProject
                    this.dataProjectCheckWorks = res.data.dataProjectCheckWorks
                    this.AllTotal = 0
                    this.InitProjectHtml(this.dataProjectCheckWorks)
                })
            },
            //数据转换
            fmtDate(val){
                if (val!=null&&val!=''){
                    return val.split(' ')[0]
                }else{
                    return ''
                }
            },
            //初始化动态生成的html内容
            InitProjectHtml(data){
                let _this = this
                $("#AddHtml").empty();
                if ($.isEmptyObject(data))
                    var a = 1;
                else {
                    var baseData = publicjs.DataGroupBy(JSON.stringify(data), 'ProjectPeopleId');
                    $.each(baseData, function (i, d) {
                        var userName = "";
                        var user = _this.AllProjectPeople.find((x) => x.Id == d.ProjectPeopleId);
                        if (user != null || user != undefined) userName = user.UserName;
                        var record = data.filter((x) => x.ProjectPeopleId == d.ProjectPeopleId);
                        var all = data.filter((x) => x.ProjectPeopleId == d.ProjectPeopleId && x.Type == 0);
                        var type1 = data.filter((x) => x.ProjectPeopleId == d.ProjectPeopleId && x.Type == 1);
                        var type2 = data.filter((x) => x.ProjectPeopleId == d.ProjectPeopleId && x.Type == 2);
                        $.each(all, function (i, d) {
                            type1.push(d);
                            type2.push(d);
                        });
                        var subTotal1 = type1.length;
                        var subTotal2 = type2.length;
                        var Total = publicjs.accDiv(subTotal1 + subTotal2, 2,3);//每人合计出勤
                        _this.AllTotal = publicjs.dcmAdd(_this.AllTotal, Total);
                        var tr1 = $("<tr></tr>");
                        tr1.append("<td rowspan='2'>" + userName + "</td><td>上午</td>");
                        var tr2 = $("<tr></tr>");
                        tr2.append("<td>下午</td>");
                        for (var ii = 1; ii < 32; ii++) {
                            var t1 = type1.filter((x) => new Date(_this.fmtDate(x.CheckWorkDate)).getDate() == ii).length;
                            if (t1 > 0) {
                                tr1.append("<td style='color: #1E9FFF'><i class='el-icon-check'></i></td>");
                                //统计每日上午出勤人数
                                var count1 = parseInt($(".AM" + ii).html())+1;
                                $(".AM" + ii).html(count1);
                            }
                            else
                                tr1.append("<td style='color: red'><i class='el-icon-close'></i></td>");
                            var t2 = type2.filter((x) => new Date(_this.fmtDate(x.CheckWorkDate)).getDate() == ii).length;
                            if (t2 > 0) {
                                tr2.append("<td style='color: #1E9FFF'><i class='el-icon-check'></i></td>");
                                //统计每日下午出勤人数
                                var count2 = parseInt($(".PM" + ii).html())+1;
                                $(".PM" + ii).html(count2);
                            }
                            else{
                                tr2.append("<td style='color: red'><i class='el-icon-close'></i></td>");
                            }
                        }
                        tr1.append("<td>" + subTotal1 + "</td>");
                        tr1.append("<td rowspan='2'>" + Total + "</td>");
                        tr2.append("<td>" + subTotal2 + "</td>");
                        $("#AddHtml").append(tr1);
                        $("#AddHtml").append(tr2);
                    });
                }
                $(".AllTotal").html(_this.AllTotal);
            },
            //时间选择变化
            datepickerchangeevent(){
                this.GetData()
            },
        }
    }
</script>

<style scoped>
    #audit {
        position: absolute;
        right: 11%;
        top: 80px;
        z-index: 9999;
    }
    #printBtn {
        position: absolute;
        right: 11%;
        top: 115px;
        z-index: 9999;
    }
    /*外包装样式*/
    .wrapper {
        width: 80%;
        height: 100%;
        margin: auto;
    }
    /*页眉样式*/
    .header {
        font-weight: bold;
        font-size: 20px;
        font-family: cursive;
        width: 80%;
        margin: auto;
        border-bottom: 2px solid black;
        padding: 10px 0px;
        position: relative;
    }

    .header img {
        width: 200px;
        height: 55px;
    }

    .header label {
        position: absolute;
        bottom: 10px;
        right: 70px;
    }
    /*标题样式*/
    h2 {
        width: 80%;
        text-align: center;
        font-size: 25px;
        font-weight: bold;
        margin: auto;
        padding: 10px 0;
    }
    /*标题样式*/
    h4 {
        width: 80%;
        text-align: center;
        font-weight: bold;
        margin: auto;
        padding: 10px 0;
    }
    /*数据表格样式*/
    .report_data {
        width: 100%;
        text-align: center;
        border: 1px solid black;
        font-size: 14px;
        word-break: break-all;
    }

    .report_data tr {
        height: 40px;
    }

    .report_data th {
        font-weight: 100;
    }
    .baseInfo .worderWrapper {
        display: inline-block;
        width: 200px;
    }
    .report_audit .tdCenter {
        text-align: center;
    }

    .report_audit tr {
        height: 70px;
    }

    .report_audit tr p {
        padding: 3px;
    }

    .report_audit td {
        padding: 0 10px;
    }

    .report_audit td:first-child {
        width: 150px;
    }

    .report_audit .tr_center {
        text-align: center;
    }

    tr p.audit {
        font: italic bold 20px/30px arial,sans-serif;
        text-align: right;
        /*padding-right: 110px;*/
    }

    tr p.audit span {
        display: inline-block;
        width: 100px;
        font: bold 17px/30px arial,sans-serif;
    }

    tr p.gray {
        color: gray;
    }

    tr p.audit span.red {
        color: red;
    }

    tr p.audit span.blue {
        color: blue;
    }
    .author {
        width: 80%;
        margin: auto;
        margin-top: 5px;
        font-weight: bold;
        text-align: right;
    }
    /*页脚样式*/
    #Footer {
        width: 80%;
        margin: auto;
        border-top: 2px solid black;
        margin-top: 60px;
        font-weight: bold;
    }
    #Footer div {
        padding-top: 5px;
        padding-bottom: 10px;
    }
    #search select {
        text-align: left;
    }
    /*折叠面板样式修改*/
    .layui-collapse .layui-colla-title {
        margin: 0;
        width: 100%;
        text-align: left;
    }
    /*报表管理下统计报表的样式*/
    #EchartData .pie {
        height: 500px;
    }

    #EchartData .pieData {
        float: left;
        width: 50%;
        height: 500px;
    }

    #EchartData .bar {
        width: 100%;
        height: 500px;
    }

    .report_data .tr_one {
        height: 50px;
    }

    .report_data .tr_two {
        height: 100px;
    }

    .report_data .td_Title {
        font-weight: bold;
    }

    .td_left {
        text-align: left;
        padding-left: 20px;
    }

    .td_Content {
        padding: 5Px 5px;
    }

    .report_data .layui-disabled, .report_data .layui-disabled:hover {
        color: black !important;
    }

    .report_data .layui-form-radio > i:hover, .report_data .layui-form-radioed > i {
        color: #5FB878 !important;
    }
</style>
